<template>
  <div class="alert-card">
    <div class="alert-header">
      <div class="alert-type">
        <el-tag :type="getAlertTypeTag(alert.type)" size="small" effect="dark">
          {{ getAlertTypeText(alert.type) }}
        </el-tag>
        <span class="alert-id">#{{ alert.id }}</span>
      </div>
      <div class="alert-time">{{ formatDateTime(alert.timestamp) }}</div>
    </div>
    
    <div class="alert-content">
      <div class="alert-description">{{ alert.description || '无描述信息' }}</div>
      
      <div class="alert-image" v-if="alert.imageUrl || alert.snapshot">
        <img :src="alert.imageUrl || alert.snapshot" alt="告警截图" @click="showFullImage = true">
      </div>
      
      <div class="alert-details">
        <div class="detail-item" v-if="alert.cameraId">
          <el-icon><VideoCamera /></el-icon>
          <span>摄像头: {{ alert.cameraName || 'ID: ' + alert.cameraId }}</span>
        </div>
        <div class="detail-item" v-if="alert.location">
          <el-icon><Location /></el-icon>
          <span>位置: {{ alert.location }}</span>
        </div>
        <div class="detail-item" v-if="alert.severity">
          <el-icon><Warning /></el-icon>
          <span>严重程度: {{ getSeverityText(alert.severity) }}</span>
        </div>
        <div class="detail-item" v-if="alert.confidence !== undefined">
          <el-icon><Check /></el-icon>
          <span>置信度: {{ (alert.confidence * 100).toFixed(1) }}%</span>
        </div>
      </div>
    </div>
    
    <div class="alert-footer">
      <div class="alert-status">
        <el-tag :type="getStatusTag(alert.status)" size="small">
          {{ getStatusText(alert.status) }}
        </el-tag>
      </div>
      
      <div class="alert-actions" v-if="!isReadonly">
        <el-button
          v-if="alert.status === 'new' || alert.status === 'unconfirmed'"
          type="primary"
          size="small"
          @click="handleConfirm"
          :loading="actionLoading.confirm"
        >
          <el-icon><Check /></el-icon>
          确认
        </el-button>
        <el-button
          v-if="alert.status !== 'resolved'"
          type="success"
          size="small"
          @click="handleResolve"
          :loading="actionLoading.resolve"
        >
          <el-icon><Check /></el-icon>
          解决
        </el-button>
        <el-button
          type="warning"
          size="small"
          @click="handleIgnore"
          :loading="actionLoading.ignore"
        >
          <el-icon><Close /></el-icon>
          忽略
        </el-button>
      </div>
    </div>
    
    <!-- 全屏图片对话框 -->
    <el-dialog
      v-model="showFullImage"
      :title="'告警截图 - ' + getAlertTypeText(alert.type)"
      width="90%"
      destroy-on-close
    >
      <div class="full-image-container">
        <img :src="alert.imageUrl || alert.snapshot" alt="告警截图全屏">
      </div>
      <template #footer>
        <el-button @click="showFullImage = false">关闭</el-button>
      </template>
    </el-dialog>
    
    <!-- 告警详情对话框 -->
    <el-dialog
      v-model="showDetails"
      :title="'告警详情 - ' + getAlertTypeText(alert.type)"
      width="60%"
      destroy-on-close
    >
      <AlertDetail :alert="alert" />
      <template #footer>
        <el-button @click="showDetails = false">关闭</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { VideoCamera, Location, Warning, Check, Close } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'

// 动态导入告警详情组件
const AlertDetail = () => import('./AlertDetail.vue')

// Props
const props = defineProps({
  alert: {
    type: Object,
    required: true
  },
  isReadonly: {
    type: Boolean,
    default: false
  }
})

// Emits
const emit = defineEmits(['confirm', 'resolve', 'ignore', 'view-details'])

// 响应式数据
const showFullImage = ref(false)
const showDetails = ref(false)
const actionLoading = ref({
  confirm: false,
  resolve: false,
  ignore: false
})

// 格式化日期时间
const formatDateTime = (timestamp) => {
  if (!timestamp) return '未知时间'
  
  const date = new Date(timestamp)
  return date.toLocaleString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit',
    second: '2-digit'
  })
}

// 获取告警类型标签颜色
const getAlertTypeTag = (type) => {
  const typeMap = {
    'pedestrian': 'success',
    'vehicle': 'info',
    'helmet': 'warning',
    'smoke': 'danger',
    'fire': 'danger',
    'illegal_parking': 'warning',
    'illegal_crossing': 'warning',
    'overtaking': 'warning',
    'red_light': 'danger'
  }
  return typeMap[type] || 'info'
}

// 获取告警类型文本
const getAlertTypeText = (type) => {
  const typeMap = {
    'pedestrian': '行人违规',
    'vehicle': '车辆违规',
    'helmet': '未戴头盔',
    'smoke': '烟雾检测',
    'fire': '火灾检测',
    'illegal_parking': '违规停车',
    'illegal_crossing': '违规穿越',
    'overtaking': '违规超车',
    'red_light': '闯红灯'
  }
  return typeMap[type] || '未知类型'
}

// 获取严重程度文本
const getSeverityText = (severity) => {
  const severityMap = {
    'low': '低',
    'medium': '中',
    'high': '高',
    'critical': '紧急'
  }
  return severityMap[severity] || '未知'
}

// 获取状态标签颜色
const getStatusTag = (status) => {
  const statusMap = {
    'new': 'info',
    'unconfirmed': 'primary',
    'confirmed': 'warning',
    'ignored': 'default',
    'resolved': 'success',
    'failed': 'danger'
  }
  return statusMap[status] || 'default'
}

// 获取状态文本
const getStatusText = (status) => {
  const statusMap = {
    'new': '新建',
    'unconfirmed': '待确认',
    'confirmed': '已确认',
    'ignored': '已忽略',
    'resolved': '已解决',
    'failed': '处理失败'
  }
  return statusMap[status] || '未知'
}

// 处理确认告警
const handleConfirm = async () => {
  actionLoading.value.confirm = true
  try {
    await emit('confirm', props.alert.id)
    ElMessage.success('告警已确认')
  } catch (error) {
    ElMessage.error('确认失败: ' + (error.message || '未知错误'))
  } finally {
    actionLoading.value.confirm = false
  }
}

// 处理解决告警
const handleResolve = async () => {
  actionLoading.value.resolve = true
  try {
    await emit('resolve', props.alert.id)
    ElMessage.success('告警已解决')
  } catch (error) {
    ElMessage.error('解决失败: ' + (error.message || '未知错误'))
  } finally {
    actionLoading.value.resolve = false
  }
}

// 处理忽略告警
const handleIgnore = async () => {
  actionLoading.value.ignore = true
  try {
    await emit('ignore', props.alert.id)
    ElMessage.success('告警已忽略')
  } catch (error) {
    ElMessage.error('忽略失败: ' + (error.message || '未知错误'))
  } finally {
    actionLoading.value.ignore = false
  }
}
</script>

<style scoped>
.alert-card {
  background: #ffffff;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  padding: 16px;
  margin-bottom: 16px;
  transition: all 0.3s ease;
  border-left: 4px solid transparent;
}

.alert-card:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  border-left-color: var(--el-color-primary);
}

.alert-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.alert-type {
  display: flex;
  align-items: center;
  gap: 8px;
}

.alert-id {
  font-size: 12px;
  color: #909399;
  font-family: monospace;
}

.alert-time {
  font-size: 12px;
  color: #909399;
}

.alert-content {
  margin-bottom: 12px;
}

.alert-description {
  font-size: 14px;
  color: #303133;
  line-height: 1.5;
  margin-bottom: 12px;
  word-break: break-word;
}

.alert-image {
  margin-bottom: 12px;
  border-radius: 4px;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.3s ease;
}

.alert-image:hover {
  transform: scale(1.02);
}

.alert-image img {
  width: 100%;
  height: auto;
  max-height: 200px;
  object-fit: cover;
}

.alert-details {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.detail-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #606266;
  background-color: #f5f7fa;
  padding: 4px 8px;
  border-radius: 4px;
}

.detail-item .el-icon {
  font-size: 14px;
}

.alert-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.alert-actions {
  display: flex;
  gap: 8px;
}

.full-image-container {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
}

.full-image-container img {
  max-width: 100%;
  max-height: 70vh;
  object-fit: contain;
  border-radius: 4px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .alert-card {
    padding: 12px;
  }
  
  .alert-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  
  .alert-footer {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  
  .alert-actions {
    width: 100%;
    justify-content: space-between;
  }
  
  .alert-actions .el-button {
    flex: 1;
    margin-right: 0;
  }
  
  .alert-details {
    flex-direction: column;
    gap: 8px;
  }
}
</style>